<template>
	<view>
		<view class="header">
			<view class="header-item flex">
				<text>只能通过微信回答</text>
				<switch color="#1F9FFB" @change="switch1" :checked="weicheck==1?false:true"></switch>
			</view>
			<view class="header-item flex">
				<text>记录微信用户名称、性别、城市</text>
				<switch color="#1F9FFB" @change="switch2" :checked="namecheck==1?false:true"></switch>
			</view>
			<view class="header-item flex">
				<text>每人只能回答一次</text>
				<switch color="#1F9FFB" @change="switch3" :checked="phonecheck==1?false:true"></switch>
			</view>
			<view class="header-item flex">
				<text>剔除无效问卷</text>
				<switch color="#1F9FFB" @change="switch5" :checked="discheck==2?true:false"></switch>
			</view>
			<view class="header-item flex">
				<text>答题上限</text>
				<switch color="#1F9FFB" @change="switch4" :checked="leastcheck==1?false:true"></switch>
			</view>
			<view class="header-item other flex" v-if="shownum">
				<text>收集份数</text>
				<input @input="getNum" :value="num" />
			</view>
		</view>
		<!-- <view class="main flex" @tap="yuLan">
			<text>问卷外观</text>
			<view class="main-right flex">
				<text>{{yulan}}</text>
				<image :src="imgurl+'youjiantou.png'"></image>
			</view>
		</view> -->
		<view class="main flex main-other">
			<text>开始时间</text>
			<view class="main-right flex">
				<text @tap="dateVisible1=true">{{start}}</text>
				<image v-if="start=='未设置'?true:false" :src="imgurl+'youjiantou.png'"></image>
				<image class="img" v-else :src="imgurl+'cha.png'" @tap="startDel"></image>
			</view>
		</view>
		<wx-picker :visible.sync="dateVisible1" mode="date" startYear="2018" endYear="2029" :value=test :current="false"
		 fields="minute" @confirm="startConfirm($event,'date1')" @cancel="startCancel" :disabled-after="false" ref="date1"></wx-picker>
		<view class="main flex main-other">
			<text>结束时间</text>
			<view class="main-right flex">
				<text @tap="dateVisible2=true">{{end}}</text>
				<image v-if="end=='未设置'?true:false" :src="imgurl+'youjiantou.png'"></image>
				<image class="img" v-else :src="imgurl+'cha.png'" @tap="endDel"></image>
			</view>
		</view>
		<wx-picker :visible.sync="dateVisible2" mode="date" startYear="2018" endYear="2029" :value=test :current="false"
		 fields="minute" @confirm="endConfirm($event,'date2')" @cancel="endCancel" :disabled-after="false" ref="date2"></wx-picker>
		<view class="save" @tap="save">提交</view>
	</view>
	</view>
</template>
<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import wxPicker from "@/components/w-picker/w-picker.vue"
	import app from "../../App.vue"
	export default {
		components: {
			wxPicker
		},
		data() {
			return {
				imgurl: "",
				height: "",
				width: "",
				dateVisible1: false,
				dateVisible2: false,
				test: '',
				start: '',
				end: "未设置",
				yulan: '未设置',
				show: false,
				showmark: false,
				array: [0, 1], //默认显示一个
				inputVal: [], //所有input的内
				weicheck: 1,
				namecheck: 1,
				phonecheck: 1,
				leastcheck: 1,
				num: 100,
				shownum: false,
				discheck: 1,
				wenid: ''
			};
		},
		methods: {
			// 左上角返回
			// 预览
			yuLan() {
				let data = {
					id: app.globalData.id,
					wxpid: this.weicheck,
					uuid: this.phonecheck,
					nameji: this.namecheck,
					shoujishu: this.num,
					wenxiao: this.discheck,
					leastcheck: this.leastcheck,
					yudate: this.start == '未设置' ? null : this.start,
					update: this.end == '未设置' ? null : this.end
				}
				this.$store.commit('setWjSet', data)
				uni.navigateTo({
					url: '../yuLan/yuLan?type=' + 1
				})
			},
			//微信回答
			switch1(e) {
				if (e.detail.value == true) {
					this.weicheck = 2
				} else {
					this.weicheck = 1
				}
			},
			//记录信息
			switch2(e) {
				if (e.detail.value == true) {
					this.namecheck = 2
				} else {
					this.namecheck = 1
				}
			},
			//手机号
			switch3(e) {
				if (e.detail.value == true) {
					this.phonecheck = 2
				} else {
					this.phonecheck = 1
				}
			},
			//答题上线
			switch4(e) {
				if (e.detail.value == true) {
					this.leastcheck = 2
					this.shownum = true
				} else {
					this.leastcheck = 1
					this.shownum = false
				}
			},
			// 剔除无效问卷
			switch5(e) {
				if (e.detail.value == true) {
					this.discheck = 2
				} else {
					this.discheck = 1
				}
			},
			getNum(e) {
				this.num = e.detail.value
			},
			bindChange(e) {
				console.log(e)
			},
			startDel() {
				this.start = '未设置'
			},
			endDel() {
				this.end = '未设置'
			},
			//显示日期弹框
			Show() {
				this.show === true ? this.show = false : this.show = true
			},
			switch6(e) {
				let that = this
				if (e.detail.value == true) {
					that.showmark = true
				}
			},
			cencal() {
				this.showmark = false
			},
			//保存
			save() {
				let data = {
					api: 'updatec',
					table: 3,
					id: app.globalData.id,
					wxpid: this.weicheck,
					uuid: this.phonecheck,
					nameji: this.namecheck,
					shoujishu: this.num,
					wenxiao: this.discheck,
					yudate: this.start == '未设置' ? null : this.start,
					update: this.end == '未设置' ? null : this.end
				}
				console.log(app.globalData.flag)
				api.add(data).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1000
					})
					if (app.globalData.flag == 1) {
						uni.navigateTo({
							url: '../editDiaocha/editDiaocha?wenid=' + this.wenid
						})
					} else if (app.globalData.flag == 2) {
						uni.navigateTo({
							url: '../createForm/editForm/editForm?wenid=' + this.wenid
						})
					} else {
						uni.navigateTo({
							url: '../createVote/editVote/editVote?wenid=' + this.wenid
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//添加选项
			addInput() {
				this.array.push(1)
				console.log(this.array)
			},
			//删除选项
			delInput(e) {
				var nowidx = e; //当前索
				var oldInputVal = this.inputVal; //所有的input值
				var oldarr = this.array; //循环内容
				oldarr.splice(nowidx, 1); //删除当前索引的内容，这样就能删除view了
				oldInputVal.splice(nowidx, 1); //view删除了对应的input值也要删掉
				if (oldarr.length < 1) {
					oldarr = [0] //如果循环内容长度为0即删完了，必须要留一个默认的。这里oldarr只要是数组并且长度为1，里面的值随便是什么
				}
				this.array = oldarr,
					this.inputVal = oldInputVal
				this.leastArray = ['不限'] //最少选项
				this.mostArray = ['不限'] //最多选项
				this.inputVal.forEach((item, index) => {
					this.leastArray.push(index + 1)
					this.mostArray.push(index + 1)
				})
			},
			//获取input的值
			getInputVal(e) {
				var nowIdx = e.currentTarget.dataset.index; //获取当前索引
				var val = e.detail.value; //获取输入的值
				var oldVal = this.inputVal;
				oldVal[nowIdx] = val; //修改对应索引值的内容
			},
			startConfirm(res) {
				let that = this
				this.start = res.result;
				console.log(res)
				if (this.start != "未设置" && this.end != "未设置") {
					var sDate = new Date(that.start.replace(/\-/g, "\/"));
					var eDate = new Date(that.end.replace(/\-/g, "\/"));
					if (sDate >= eDate) {
						that.start = "未设置"
						uni.showModal({
							content: '开始时间不能大于或等于结束时间',
							showCancel: false,
							confirmColor: "#209FFC",
							confirmText: "知道了",
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}
				}
			},
			startCancel() {

			},
			endConfirm(res) {
				let that = this
				this.end = res.result
				if (this.start != "未设置" && this.end != "未设置") {
					var sDate = new Date(that.start.replace(/\-/g, "\/"));
					var eDate = new Date(that.end.replace(/\-/g, "\/"));
					if (sDate >= eDate) {
						that.end = "未设置"
						uni.showModal({
							content: '开始时间不能大于或等于结束时间',
							showCancel: false,
							confirmColor: "#209FFC",
							confirmText: "知道了",
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}
				}
				console.log(this.end, this.start)
			},
			endCancel() {

			},
			getTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 1 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minute >= 0 && minute <= 9) {
					minute = "0" + minute;
				}
				this.test = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			if(options.wenid) {
				this.wenid = options.wenid
				api.look({
					api: "wenfind",
					shu: "1",
					table: "3",
					wenid: this.wenid
				}).then(res => {
					if (res.code == 200) {
						this.discheck = res.date[0].wenxiao
						this.weicheck = res.date[0].wxpid
						this.phonecheck = res.date[0].uuid
						this.namecheck = res.date[0].nameji
						this.num = res.date[0].shoujishu
						this.start = res.date[0].yudate != null ? res.date[0].yudate.substring(0, res.date[0].yudate.length - 3) : this.start
						this.end = res.date[0].update != null ? res.date[0].update.substring(0, res.date[0].update.length - 3) : '未设置'
						if (res.date[0].yanse != null || res.date[0].beijing != null) {
							this.yulan = "已设置"
						}
						if (this.num != null && this.num != 0) {
							this.leastcheck = 2
						}
					}
				}).catch(err => {
					console.log(err)
				})
			} else {
				let data = {...this.$store.state.wjSet}
				this.discheck = data.wenxiao
				this.weicheck = data.wxpid
				this.phonecheck = data.uuid
				this.namecheck = data.nameji
				this.num = data.shoujishu
				this.leastcheck = data.leastcheck
				this.start = data.yudate != null ? data.yudate.substring(0, data.yudate.length - 3) : this.start
				this.end = data.update != null ? data.update.substring(0, data.update.length - 3) : '未设置'
				if (data.yanse != null || data.beijing != null) {
					this.yulan = "已设置"
				}
			}
			this.yulan = options.yulan
			this.imgurl = app.globalData.imgurl
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight + 'px'
					this.width = res.windowWidth + 'px'
				}
			})
			var date = new Date();
			var Months = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; //月份从0开始，因此要+1
			var Dates = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			var Hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			var Minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			this.start = date.getFullYear() + '-' + Months + '-' + Dates + ' ' + Hours + ':' + Minutes;
		},
		onShow() {
			this.getTime()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-weight: 500;
	}

	.header {
		background: #fff;



		.other {
			border-bottom: none;
		}
	}

	.header-item {
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #DFDFDF;
		color: #333;
		font-size: 36rpx;
	}

	.main {
		background: #fff;
		margin: 20rpx 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #333;
		font-size: 36rpx;
		height: 100rpx;
		justify-content: space-between;

		.main-right {
			color: #999;
			font-size: 30rpx;

			image {
				width: 45rpx;
				height: 50rpx;
			}

			.img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.save {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background: #209FFC;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		position: fixed;
		bottom: 5%;
		left: 30rpx;
	}

	.main-other {
		margin: 0
	}

	.mark {
		background: rgba(0, 0, 0, .7);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.main {
			width: 90%;
			height: 50%;
			position: fixed;
			top: 20%;
			left: 5%;
			z-index: 10000;
			opacity: 1 !important;
			background-color: #fff;

			.main-top {
				input {
					width: 96%;
					height: 70rpx;
					line-height: 70rpx;
					margin: 20rpx auto;
					border: 1rpx solid #DFDFDF;
					border-radius: 20rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
				}
			}

			.main-center {
				margin: 50rpx 0;

				button {
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					color: #333;
					font-size: 30rpx;
				}

				button::after {
					border: none;
				}
			}

			.main-bottom {
				justify-content: space-around;

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
	}

	.placeholder {
		color: #999;
		font-size: 30rpx;
	}
</style>
